/* 导航栏样式 */

.guide {
    --controlLen: 414;
    /* 导航栏宽度 */
    /* --guideWide: 414px; */
    --guideWide: calc(var(--controlLen, 414) * 1px);
    /* 导航栏高度 */
    /* --guideHigh: 70px; */
    --guideHigh: calc(var(--guideWide) * 0.1691);
    /* 背景颜色 */
    --backColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 背景阴影 */
    --backShadowColor: var(--ShadowBlack, rgba(0, 0, 0, 0.2));
    /* 滑块颜色 */
    --sliderColor: var(--StandardBlue, rgba(64, 96, 255, 1));

    width: fit-content;
    touch-action: none;
}

.guide .back {
    position: relative;
    width: var(--guideWide);
    height: var(--guideHigh);
    opacity: 1;
    border-radius: 10px 10px 0px 0px;
    background: var(--backColor);
    box-shadow: 0px 2px 48px var(--backShadowColor);
}

.guide nav {
    display: flex;
    width: var(--guideWide);
    height: var(--guideHigh);
}

.guide ul {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
}

.guide ul li {
    display: flex;
    flex: 1;
    position: relative;
    list-style: none;
    justify-content: center;
    text-align: center;
}

.guide ul li a {
    display: flex;
    text-decoration: none;
    filter: none;
    width: calc(var(--guideHigh) * 0.4);
    height: calc(var(--guideHigh) * 0.4);
    background-size: 100%;
}

.guide ul li #guideA1 {
    background-image: url(./主页图标.svg);
}

.guide ul li #guideA2 {
    background-image: url(./日历图标.svg);
}

.guide ul li #guideA3 {
    background-image: url(./使用图标.svg);
}

.guide ul li #guideA4 {
    background-image: url(./个人图标.svg);
}

/* 滑块 */
.slider {
    width: calc(var(--guideHigh) * 0.6);
    height: calc(var(--guideHigh) * 0.6);
    background-color: var(--sliderColor);
    border-radius: calc(var(--guideHigh) * 0.15);
    position: absolute;
    left: calc(var(--guideWide) * 0.125 - var(--guideHigh) * 0.3);
    transition: all ease 0.3s;
}